<!-- 用户管理 -->
<template>
  <el-card shadow="never" class="fix-height" body-class="chat-body">
    <el-row :gutter="10" class="mt-3 chat-input">
      <el-col :span="24">
        <el-input
          type="textarea"
          v-model="questionText"
          placeholder="alt+enter换行"
          @keydown.enter="send($event)"
          :autosize="{ minRows: 3, maxRows: 3 }"
        />
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-3">
      <el-col :span="24" class="btn-group">
        <el-button
          type="primary"
          :icon="Position"
          @click="send"
          :loading="loading"
        >
          发 送
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { Position } from "@element-plus/icons-vue";

defineOptions({
  name: "ChatFrame",
  inheritAttrs: false,
});

// 文字
const props = defineProps({
  postDetail: String,
  // vue2.x 这里是value
  modelValue: Boolean,
});

// input输入框
const questionText = ref("");

// 监听点击文字变化
watch(
  () => props.postDetail,
  (newValue) => {
    questionText.value = newValue;
  }
);

// 发送问题后清空
const clearText = () => {
  nextTick(() => {
    questionText.value = "";
  });
};

// 回调事件
const emits = defineEmits(["send", "update:modelValue"]);
const loading = useVModel(props, "modelValue", emits);

// 发送问题
const send = (e) => {
  if (e.altKey) {
    // 在输入值的末尾插入换行符
    questionText.value += "\n";
    return;
  }
  if (!questionText.value) {
    return;
  }
  loading.value = true;
  e.preventDefault();
  emits("send", questionText.value);
  clearText();
};
</script>

<style lang="scss" scoped>
.chat-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px;

  .btn-group {
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
  }
}
</style>
